<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        padding: 50px;
    }
    
    .mydiv {
        height: 200px;
        width: 200px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
        display: inline-block;
    }
    
    .case1 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: yellowgreen;
    }
    
    .case2 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: yellowgreen;
        background-image: linear-gradient(to right, transparent 50%, #655 0);
    }
    
    .case2::before {
        content: '';
        display: block;
        margin-left: 50%;
        height: 100%;
        border-radius: 0 100% 100% 0 / 50%;
        background-color: inherit;
        transform-origin: left;
        border: 1px solid;
        transform: rotate(.2turn);
    }
    /* 不要在这里用background:
inherit;， 而应该用background-
color: inherit;，否则渐
变背景也会被继承过来。 */
    
    .case3 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: yellowgreen;
        background-image: linear-gradient(to right, transparent 50%, #655 0);
    }
    
    @keyframes spin {
        to {
            transform: rotate(.5turn);
        }
    }
    
    @keyframes bg {
        50% {
            background: #655;
        }
    }
    
    .case3::before {
        content: '';
        display: block;
        margin-left: 50%;
        height: 100%;
        border-radius: 0 100% 100% 0 / 50%;
        background-color: inherit;
        transform-origin: left;
        border: 1px solid;
        animation: spin 3s linear infinite, bg 6s step-end infinite;
    }
    /* SVG 解决方案 */
    /* svg {
        transform: rotate(-90deg);
        background: yellowgreen;
        border-radius: 50%;
    }
    
    @keyframes fillup {
        to {
            stroke-dasharray: 158 158;
        }
    }
    
    circle {
        fill: yellowgreen;
        stroke: #655;
        stroke-width: 50;
        stroke-dasharray: 0 158;
        animation: fillup 5s linear infinite;
    } */
    
    svg {
        width: 100px;
        height: 100px;
        transform: rotate(-90deg);
        background: yellowgreen;
        border-radius: 50%;
    }
    
    circle {
        fill: yellowgreen;
        stroke: #655;
        stroke-width: 32;
        stroke-dasharray: 38 100;
        /* 可得到比率为38%的扇区 */
    }
</style>

<body>
    <div class="mydiv case1"></div>
    <div class="mydiv case2"></div>
    <div class="mydiv case3"></div>

    <svg width="100" height="100">
      <circle r="25" cx="50" cy="50" />
      </svg>

    <svg viewBox="0 0 32 32">
        <circle r="16" cx="16" cy="16" />
        </svg>
</body>

</html>